<template>
    <!-- 左侧菜单 -->
    <el-aside width="260px">
        <div class="el-aside-logo">教学过程管理系统</div>
        <!-- element-plus的菜单标签 -->
        <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            v-if="isMenuLoad"
            :router="true"
            unique-opened
        >
            <template v-for="menu in firstLevelMenu" :key="menu.menuId">
                <!--一级菜单的二级目录为0-->
                <template v-if="getSecondLevelMenuList(menu).length == 0">
                    <el-menu-item :index="getFirstLevelRouter(menu)" :key="menu.menuId">
                        <el-icon>
                            <Menu/>
                        </el-icon>
                        {{ menu.name }}
                    </el-menu-item>
                </template>
                <template v-if="getSecondLevelMenuList(menu).length > 0">
                    <el-sub-menu :index="menu.path" :key="menu.menuId">
                        <template #title>
                            <el-icon>
                                <Menu/>
                            </el-icon>
                            <span>{{ menu.name }}</span>
                        </template>
                        <!--二级菜单-->
                        <template v-for="secondMenu in getSecondLevelMenuList(menu)" :key="secondMenu.menuId">
                            <template v-if="getThirdLevelMenuList(secondMenu).length == 0">
                                <el-menu-item :index="getSecondLevelRouter(menu,secondMenu)">
                                    <el-icon>
                                        <Management/>
                                    </el-icon>
                                    {{ secondMenu.name }}
                                </el-menu-item>
                            </template>
                            <template v-if="getThirdLevelMenuList(secondMenu).length > 0">
                                <el-sub-menu :index="getSecondLevelRouter(menu,secondMenu)">
                                    <template #title>
                                        <el-icon>
                                            <Management/>
                                        </el-icon>
                                        <span>{{ secondMenu.name }}</span>
                                    </template>
                                    <template v-for="thirdMenu in getThirdLevelMenuList(secondMenu)"
                                              :key="thirdMenu.menuId">
                                        <el-menu-item :index="getThirdLevelRouter(menu,secondMenu,thirdMenu)">
                                            <el-icon>
                                                <Promotion/>
                                            </el-icon>
                                            {{ thirdMenu.name }}
                                        </el-menu-item>
                                    </template>
                                </el-sub-menu>
                            </template>
                        </template>
                    </el-sub-menu>
                </template>
            </template>
        </el-menu>
    </el-aside>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {getLocalStorage} from "../util/storage.util";
import {useRoute} from "vue-router";

const route = useRoute();
const isMenuLoad = ref(false)
const menuList: any = JSON.parse(<string>getLocalStorage("UserInfo")).menuList
const activeMenu = computed(() => route.path);

var firstLevelMenu: any
var secondLevelMenu: any
var thirdLevelMenu: any
onMounted(() => {
    firstLevelMenu = []
    secondLevelMenu = []
    thirdLevelMenu = []
    for (const menu of menuList) {
        // 一级菜单
        if (menu.level === 1) {
            firstLevelMenu.push(menu)
        }
        // 二级菜单
        if (menu.level === 2) {
            secondLevelMenu.push(menu)
        }
        // 三级菜单
        if (menu.level === 3) {
            thirdLevelMenu.push(menu)
        }
    }
    console.log(firstLevelMenu)
    console.log(secondLevelMenu)
    console.log(thirdLevelMenu)
    // 开始加载菜单
    isMenuLoad.value = true
})

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

function getSecondLevelMenuList(firstLevelMenu: any) {
    const menuId = firstLevelMenu.menuId
    let secondLevelMenuList = []
    for (const menu of secondLevelMenu) {
        if (menu.parentMenuId === menuId) {
            secondLevelMenuList.push(menu)
        }
    }
    return secondLevelMenuList
}

function getThirdLevelMenuList(secondLevelMenu: any) {
    const menuId = secondLevelMenu.menuId
    let thirdLevelMenuList = []
    for (const menu of thirdLevelMenu) {
        if (menu.parentMenuId === menuId) {
            thirdLevelMenuList.push(menu)
        }
    }
    return thirdLevelMenuList
}

/**
 * 获取一级路由
 * @param menu
 * @param secondMenu
 */
function getFirstLevelRouter(menu: any) {
    // 根据用户权限等级确定基础路由
    let baseRouter: String = menu.userLevel === 1 ? '/student' : '/teacher'
    return baseRouter + '/' + menu.path
}

/**
 * 获取二级路由
 * @param menu
 * @param secondMenu
 */
function getSecondLevelRouter(menu: any, secondMenu: any) {
    // 根据用户权限等级确定基础路由
    let baseRouter: String = menu.userLevel === 1 ? '/student' : '/teacher'
    return baseRouter + '/' + menu.path + '/' + secondMenu.path
}

/**
 * 获取三级路由
 * @param menu
 * @param secondMenu
 * @param thirdMenu
 */
function getThirdLevelRouter(menu: any, secondMenu: any, thirdMenu: any) {
    // 根据用户权限等级确定基础路由
    let baseRouter: String = menu.userLevel === 1 ? '/student' : '/teacher'
    return baseRouter + '/' + menu.path + '/' + secondMenu.path + '/' + thirdMenu.path
}

</script>


<style scoped>
.el-aside-logo {
    height: 120px;
    font-size: 20px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.el-aside {
    background-color: #14b2f5;
    position: fixed;
    height: 100%;
    width: 260px;
    overflow-y: hidden;
}

.el-menu {
    color: #ffffff;
    background-color: #14b2f5;
}

.el-sub-menu-item:hover {
    color: rgba(0, 0, 0, 0.67);
}

.el-sub-menu {
    background-color: #14b2f5;
    
    span {
        color: #ffffff;
    }
    
    i {
        color: #ffffff;
    }
}

.el-menu li:hover {
    span {
        color: #2c3e50;
    }
    
    i {
        color: #2c3e50;
    }
}

.el-sub-menu li:hover {
    color: #2c3e50;
    
    i {
        color: #2c3e50;
    }
}

.el-menu-item {
    color: #ffffff;
    background-color: #14b2f5;
    
    i {
        color: #ffffff;
    }
}

.el-menu-item.is-active {
    background-color: #f2f2f2;
    
    i {
        color: #14b2f5;
    }
}

.el-sub-menu {
    color: #ffffff;
}
</style>